<template>
    <div class="detail-container">
        <div class="header">
            <div>
                <div class="left">
                    <i></i>
                </div>
            </div>
            <!-- <h4>大件会</h4> -->
            <div class="logo">
                订单详情
            </div>
        </div>
        <div class="confirm">
            <i></i>
            <span>请找现场团长确认您的订单</span>
        </div>
        <div class="address">
            <i class="fl"></i>
            <div class="addr">
                <div>
                    钟煌
                    <span>13812348888</span>
                </div>
                <p>湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A湖北省武汉市武昌区静安路六号尚文科技大厦5.5创意产业园A座24楼A</p>
            </div>
        </div>
        <div class="tiaowen"></div>
        <div class="unPayed">
            <div class="unPayed">
                <div class="header">
                    DJ 大件会
                </div>
                <div class="body">
                    <div class="pro clearfix">
                        <div class="fl">
                            <img src="../../../assets/images/myOrder/shangpinru.png" alt="">
                        </div>
                        <div class="fr">
                            <ul>
                                <li>2017年10月28日『武汉业主采购团』建材专场</li>
                                <li>冠珠瓷砖</li>
                            </ul>
                        </div>
                    </div>
                    <div class="header hasPayed">
                        <div class="clearfix">
                            <span class="fl">商品订金：</span>
                            <span class="fr">¥
                                <i>300</i>
                            </span>
                        </div>
                        有效期至：2018-02-01
                        <div class="line"></div>
                    </div>
                    <div class="header hasPayed total">
                        总计
                        <i>300</i>
                        <div class="line"></div>
                    </div>
                </div>
            </div>

        </div>
        <div class="listInfo">
            <div class="clearfix">
                <span>订单编号：</span>
                <span>23234387548437</span>
            </div>
            <div class="clearfix">
                <span>订单时间：</span>
                <span>2017-11-20  10:30:32</span>
            </div>
        </div>
    </div>
</template>
<script>
</script>
<style scoped lang="less">
    .header {
        color: #000;
        background-color: #fff;
        .logo {
            a {
                display: inline-block;
                width: 131/37.5rem;
                height: 42/37.5rem;
                margin-top: 18/37.5rem;
            }
        }
        .left {
            position: absolute;
            left: 32/37.5rem;
            top: 35/37.5rem;
            height: 32/37.5rem;
            line-height: 32/37.5rem;
            a {
                font-size: 32/40rem;
            }
            i {
                display: inline-block;
                width: 22/37.5rem;
                height: 30/37.5rem;
                background: url(../../../assets/images/index/gengduo@2x.png) no-repeat;
                background-size: contain;
                transform: rotate(180deg);
            }
        }
    }

    .confirm {
        height: 120/37.5rem;
        line-height: 120/37.5rem;
        background-color: #e8393d;
        text-align: left;
        padding: 0 32/37.5rem;
        i {
            display: inline-block;
            width: 30/37.5rem;
            height: 30/37.5rem;
            background: url(../../../assets/images/index/clock2x.png) no-repeat;
            background-size: contain;
        }
        span {
            margin-left: 27/37.5rem;
            font-size: 32/37.5rem;
            color: #fff;
        }
    }

    .address {
        text-align: left;
        padding: 39/37.5rem 32/37.5rem 27/37.5rem 32/37.5rem;
        font-size: 30/37.5rem;
        color: #333;
        background-color: #fff;
        i {
            display: inline-block;
            width: 26/37.5rem;
            height: 30/37.5rem;
            background: url(../../../assets/images/index/adr@2x.png) no-repeat;
            background-size: contain;
            margin-top: 56/37.5rem;
        }
        .addr {
            margin-left: 30px;
            span {
                margin-left: 59/37.5rem;
            }
            p {
                margin-top: 23/37.5rem;
                font-size: 26/37.5rem;
                color: #555;
                line-height: 34/37.5rem;
            }
        }
    }

    .tiaowen {
        height: 8/37.5rem;
        background: url(../../../assets/images/index/tiaowen.png);
        background-size: contain;
    }

    .unPayed {
        background-color: #fff;
        margin-top: 24/37.5rem;
        .header {
            padding: 0 31/37.5rem;
            box-sizing: border-box;
            border-bottom: 2px solid #eee;
            height: 80/37.5rem;
            line-height: 80/37.5rem;
            text-align: left;
            font-size: 26/37.5rem;
            color: #555;
            .fl {
                font-size: 24/37.5rem;
            }
            .fr {
                font-size: 26/37.5rem;
                color: #da1a1e;
            }
        }
        .body {
            padding-top: 18/37.5rem;
            padding: 0 31/37.5rem;
            text-align: right;
            .pro {
                .fl {
                    width: 200/37.5rem;
                    height: 200/37.5rem;
                    margin-top: 13/37.5rem;
                }
                .fr {
                    width: 451/37.5rem;
                    text-align: left;
                    li:nth-of-type(1) {
                        font-size: 30/37.5rem;
                        line-height: 56/37.5rem;
                        color: #333;
                    }
                    li:nth-of-type(2) {
                        font-size: 28/37.5rem;
                        line-height: 56/37.5rem;
                        color: #555;
                    }
                    li:nth-of-type(3) {
                        font-size: 24/37.5rem;
                        text-align: right;
                        span {
                            color: red;
                            font-size: 26/37.5rem;
                        }
                    }
                }
            }
            .mint-button {
                width: 170/37.5rem;
                height: 68/37.5rem;
                font-size: 28/37.5rem;
                margin-top: 57/37.5rem;
                margin-bottom: 32/37.5rem;
            }
            .hasPayed {
                padding: 21/37.5rem 0 !important;
                text-align: left;
                font-size: 24/37.5rem;
                padding: 0;
                color: #888;
                border-bottom: 0;
                margin-top: 24/37.5rem;
                width: 100%;
                position: relative;
                line-height: 50/37.5rem;
                height: auto;
                .line {
                    width: 104%;
                    height: 20px/37.5rem;
                    background-color: #eee;
                    position: absolute;
                    top: 0;
                    right: -32/37.5rem;
                }
            }
            .total {
                text-align: right;
            }
        }
    }
    .listInfo {
        line-height: 50/37.5rem;
        color: #555;
        font-size: 26/37.5rem;
        padding: 0 31/37.5rem;
        background-color: #fff;
        margin-top: 26/37.5rem;
        div {
            span:first-child {
                float: left;
            }
            span:last-child {
                float: right;
            }
        }
    }
</style>